<template>
  <div class="app-container">
    <div>
      <div style="color: rgb(48,49,51); margin-bottom: 30px">请在下面选择一个日期（或日期范围来生成数据），包含起始 & 结束日期</div>
      <!--      <div style="color: rgb(96,98,102); margin-bottom: 20px; font-size: 18px"></div>-->
      <div style="color: rgb(96,98,102); margin-bottom: 10px; font-size: 16px">警告，这将会删除已有员工的该范围内的所有工资数据并将根据考勤信息重新生成
      </div>
      <div style="color: rgb(96,98,102); margin-bottom: 20px; font-size: 15px">结束月份[可选]，如果不选择，则只重新生成单个月份的工资信息</div>
      <p style="color: darkred">!不存在月考勤记录的员工将无发生成工资信息</p>
    </div>
    <div>
      <!--      <div class="block">-->
      <!--        <el-date-picker-->
      <!--          v-model="value1"-->
      <!--          type="daterange"-->
      <!--          format="yyyy-MM"-->
      <!--          value-format="yyyy-M"-->
      <!--          range-separator="至"-->
      <!--          start-placeholder="开始年｜月份"-->
      <!--          end-placeholder="结束年｜月份"/>-->
      <!--      </div>-->

      <div class="block" style="margin-bottom: 20px">
        <template>
          <el-select v-model="departId" placeholder="请选择部门">
            <el-option
              v-for="item in departList"
              :key="item.departId"
              :label="item.name"
              :value="item.departId"/>
          </el-select>
        </template>
      </div>

      <div class="block">
        <el-date-picker
          v-model="value1"
          type="month"
          placeholder="选择开始月份"
          value-format="yyyy-M"/>
        <span>&emsp;&emsp;至&emsp;&emsp;</span>
        <el-date-picker
          v-model="value2"
          type="month"
          value-format="yyyy-M"
          placeholder="选择结束月份"/>
      </div>

    </div>

    <br>
    <div>
      <el-button type="success" @click="handleGen" :loading="genLoading">生成工资信息</el-button>
    </div>

  </div>
</template>

<script>/* eslint-disable indent */

import { genWages } from '../../../../api/wage'
import { getAllDepartments } from '../../../../api/department'

export default {

  data() {
    return {
      value1: '',
      value2: '',

      departList: [],
      departId: '',
      genLoading: false

    }
  },
  created() {
    this.fetchDepartmentData()
  },
  methods: {
    fetchDepartmentData() {
      getAllDepartments().then(response => {
        this.departList = response.data
        // const keySet = new Set()
        // const newArr = []
        // this.departList.forEach((department) => {
        //   if (!keySet.has(department.departId)) {
        //     keySet.add(department.departId)
        //     newArr.push({
        //       'text': department.name,
        //       'value': department.departId
        //     })
        //   }
        // })
        // this.departFilter = newArr
      })
    },
    async handleGen() {
      this.genLoading = true
      console.log(this.departId)
      if (this.departId == null || this.departId === '') {
        this.$message.error('请选择部门')
        this.genLoading = false

        return
      }
      const obj1 = this.value1
      const obj2 = this.value2
      if (obj1 == null || obj1 === '') {
        this.$message.error('请选择开始月份')
        this.genLoading = false
        return
      }
      const arr = obj1.split('-')
      const a = arr[0]
      const b = arr[1]
      let c
      let d

      if (obj2 == null || obj2 === '') {
        c = a
        d = b
      } else {
        const arr = obj2.split('-')
        c = arr[0]
        d = arr[1]
      }
      console.log(a, b, c, d)

      if (a > c) {
        this.$message.error('结束年份不能小于起始年份')
        this.genLoading = false
        return
      }
      if (a === c && b > d) {
        this.$message.error('结束月份不能小于起始月份')
        this.genLoading = false
        return
      }
      const that = this
      this.$confirm('此操作将重新生成所有员工的工资信息，不可撤销, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const result = await genWages(a, b, c, d, this.departId)
        this.genLoading = false

        if (result.success) {
          that.$notify({
            title: '数据生成成功',
            message: '总计删除【' + result.message + '】条记录，新增【' + result.code + '】条记录',
            duration: 0,
            type: 'success'
          })
        } else {
          that.$notify({
            title: '提示',
            message: '数据生成失败, ' + result.message,
            duration: 0,
            type: 'error'
          })
        }
      }).catch(() => {
        this.genLoading = false
      })

      // genWages();
    }
  }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .expanded_input {
    width: 555px;
  }
</style>
